/* 样式重置 */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: #f3f5f7;
    /* height: 1500px; */
}



li {
    list-style: none;
}

a {
    text-decoration: none;
} 

input , button {
    outline: 0;
    border: 0;
}

/* 定义一些公共类 */
.fl {
    float: left;
}

.fr {
    float: right;
}

 /* 两行显示省略号 */
 .text-ellipsisl2{
    overflow:hidden;
    text-overflow:ellipsis;

    /*弹性伸缩盒子模型显示*/
    display:-webkit-box;

    /*限制在一个块元素显示的文本的行数*/
    -webkit-line-clamp:2;

    /*设置或检索伸缩盒对象的子元素的排列方式*/
    -webkit-box-orient:vertical;
}

.page {
    width: 1200px;
    margin: 0 auto;
    /* background-color:pink; */
}

.clearfix:after{ /*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
     clear:both;
    height: 0;   /*解决浏览器兼容问题*/
    visibility: hidden; /*解决浏览器兼容问题*/
}
.clearfix{
    *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

/* header start */
.header {
    /* height: 100px; */
    /* line-height: 100px; */
    background-color: #f3f5f7;
}

.header .menu {
    position: relative;
    height: 100px;
    width: 1340px;
    margin:0 auto;
}

.header .menu .logo {
    position: absolute;
    top: 50%;
    left: 0px;
    margin-top: -20px;
    width: 193px;
    height: 40px;
    background: url(../image/logo.png) no-repeat;
}



.header .menu .nav {
   position: absolute;
   top:50%;
   margin-top: -12px;
   left:248px;
    overflow: hidden;
}


.header .menu .nav li {
    float: left;
    margin-right: 18px;
    padding-bottom: 10px;
    
}

.header .menu .nav li a {
    padding-left:13px;
    padding-right:13px;
    color:#000;
    font-size:18px
}

.header .menu .nav li:first-child {
    border-bottom: 2px solid #00a4ff;
}

.header .menu .nav li:hover {
    border-bottom: 2px solid #00a4ff;
}


.header .menu  .searchWrap {
    position: absolute;
    left:530px;
}

.header .menu  .searchWrap .search {
    width: 362px;
    height: 40px;
    padding-left: 20px;
    margin-top: 30px;
    border: 1px solid #00a4ff;
}

.header .menu  .searchWrap .btn {
    position: absolute;
    left:362px;
    top:30px;
    width: 50px;
    height: 40px;
    background: #00a4ff url(../image/search.png) no-repeat center;
}

.header .menu .user {
    position: absolute;
    left:1000px;
    top:50%;
    /* margin-top: -17px; */
    /* 
    translate3d(x,y,z); 
    -50%; 网上移动自动高度的负一半
    */
    transform: translate3d(0,-50%,0);
}

.header .menu .user .dot {
    margin: 0 36px;
}

.header .menu .user img {
    vertical-align: middle;
}

/* header end */


/* banner start */
.banner {
    height: 420px;
    background-color: #1c036c;
}

.banner .container {
    position: relative;
    height: inherit;
    background: url(../image/banner.png) no-repeat;
}

.banner .container .tabs {
    overflow: hidden; /* 解决垂直外边距塌陷问题 */
    /* height: 420px; */
    height: inherit;   /* 继承父容器的高度 */
    width: 187px;
    background-color: rgba(0,0,0,.3);
    /* background-color: pink; */
}


.banner .container .tabs li {
   margin: 30px 0;
   padding: 0 19px;
   color:#fff;
   font-size: 14px;
}


.banner .container .tabs li:first-child {
    color: #00a4ff;
}

.banner .container .tabs li:hover {
    color: #00a4ff;
}

.banner .container .study {
    width: 228px;
    height: 300px;
    position: absolute;
    top:50px;
    right: 50px;
    background-color: #fff;
    /* text-align: center; */
}

.banner .container .study  .title {
    height: 48px;
    line-height: 48px;
    text-align: center;
    background-color: #9bceea;
    color:#fff;
    font-size: 18px;
    font-weight: 700;
}

.banner .container .study ul {
    padding: 20px;
}

.banner .container .study ul li {
    /* background-color: pink; */
    border-bottom: 1px solid #ccc;
    padding-bottom: 14px;
    margin-top: 5px;
}



.banner .container .study ul li .bigtitle {
    font-size: 14px;
    color: #7d7d7d
}

.banner .container .study ul li .smalltitle {
    font-size: 12px;
    color: #a5a5a5;
}

.banner .container .study ul li:hover .bigtitle,
.banner .container .study ul li:hover .smalltitle
{
    color: #00a4ff;
}

.banner .container .study button {
    position: absolute;
    bottom:12px;
    left:50%;
    /* margin-left: -100px; */
    transform: translate3d(-50%,0,0);
    width: 200px;
    height: 40px;
    background-color: #fff;
    color:#00a4ff;
    font-size: 18px;
    border: 1px solid  #00a4ff;
  

}


/* banner stop */

/* main start */

.main {
    /* height: 3000px; */
    /* background-color: pink; */
}
.main  .best {
   
    background-color: #fff;
    margin-top: 10px;
    margin-bottom: 26px;
    height: 60px;
    line-height: 60px;
    box-shadow: 0 0 10px #ccc;
}
.main  .best ul li{
    font-size:16px;
    float: left;
    padding: 0 18px;
}

.main  .best ul li:first-child {
    color: #00a4ff;
    font-weight: bold;
}

.main  .best ul li:last-child {
    font-size:12px;
    float:right;
    color: #00a4ff;
    cursor: pointer;
}
/* main end */

/* lesson start*/
.main .lesson .header {
    /* height: 60px; */
    margin-bottom: 20px;
    color: #787272;

}

.main .lesson .header .last {
    font-size: 12px;
}

.main .lesson .list li {
    position: relative;
    float: left;
    margin-right: 12px;
    margin-bottom: 15px;
    width: 230px;
    height: 268px;
    background-color: #fff;
    box-shadow: 0 0 10px #ccc;
    transition: all 0.4s;
    
}

.main .lesson .list li .photoWrap {
    height: 155px;
    overflow: hidden;
}

.main .lesson .list li:hover {
    /* transform: translate3d(0,-10px,0); */
}
.main .lesson .list li:hover .photo {
    transform: scale(1.08) rotate(4deg);
}
.main .lesson .list li:nth-child(5n){
    margin-right: 0px;
}

.main .lesson .list li .photo {
    transition: all 0.4s;
    width: 100%;
}

.main .lesson .list li .text {
    margin:25px 20px;
}

.main .lesson .list li .text .title {
    margin-bottom: 10px;
}

.main .lesson .list li .text span {
    font-size: 14px;
}

.main .lesson .list li .text   .level {
    color: #ff7c2d
}

.main .lesson .list li .text   .study {
    color: #666;
}


.main .lesson .list li .icon {
    position: absolute;
    top: 6px;
    right: -6px;
}

/* lesson end*/




/* 固定菜单开始 */
.fixedMenu {
    position: fixed;
    top:80px;
    /* calc用来做运算 */
    right:calc(50% + 600px + 28px);
    width: 100px;
    height: 425px;
    background-color: #fff;
    box-shadow: 0 0 10px #ccc;
    border-radius: 8px;
}

.fixedMenu ul li {
    text-align: center;
    line-height: 34px;
   
}

.fixedMenu ul li:hover {
    color: #00a4ff;
}
/* 固定菜单结束 */



.program .header > span:first-child {
    margin-right: 350px;
}


.program .header  .level span {
    margin-right: 62px;
}

.program .header .all {
    font-size: 12px;
}

.program  .programDetail {
    margin-bottom: 20px;
}

.program  .programDetail  .list {
    width: 957px;
    height: 392px;
    /* background-color: pink; */
}

.program  .programDetail  .list .content {
    margin-top: 19px;
}

.program  .programDetail  .list .content li{
    margin-right: 12px;
}

.program  .programDetail  .list .content li:last-child {
    margin-right: 0px;
}



/* footer start */
/* footer end */

.footer {
    height: 245px;
    background-color: #fff;
}

.footer .content {
    padding-top: 30px;
    padding-left: 24px;
    height: inherit;   /* 继承父亲的高度 */
    /* background-color: pink; */
    color: #666;
}

.footer .content .left img {
    margin-bottom: 24px;

}

.footer .content .left .desc {
    font-size: 14px;
}

.footer .content .left .copy {
    font-size: 12px;
}

.footer .content .left button {
    width: 120px;
    height: 38px;
    border: 1px solid #00a4ff;
    font-size: 16px;
    color: #00a4ff;
    background-color: #fff;
    margin-top: 14px;
}

.footer .content .right dl {
    color: #333;
    margin: 0 50px;
}

.footer .content .right dl dt {
    margin-bottom: 10px;
}

.footer .content .right dl dd {
    font-size: 12px;
    line-height: 1.5;
    
}






